<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 
 "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> 

<svg width="100%" height="100%">

<g transform="translate(0,0)">  
<polygon
  points="0,50 50,50 50,100 100,100 100,150 150,150 150,200 200,200 200,250 250,250 0,250"
  style="fill:black;"/>
</g>


<defs>
  <radialGradient id="gradientDefinition"
     gradientUnits="objectBoundingBox" cx="30%" cy="30%"> 
     <stop stop-color="white" offset="0%"/>
     <stop stop-color="green"  offset="100%"/>
  </radialGradient> 
  </defs>


<g transform="translate(0,0)">
  <circle id="circle1" cx="25" cy="35" r="15"
        stroke-width="0"  style="fill:url(#gradientDefinition)">              
    <animate id="circle1" attributeName="cx" attributeType="XML" fill="freeze" from="25" to="65" dur="0.5s" />
    <animate id="circle2" attributeName="cy" attributeType="XML" fill="freeze" from="35" to="35" dur="0.5s" />

 <animate id="circle3" attributeName="cx" attributeType="XML" begin="circle2.end" fill="freeze" from="65" to="65" dur="0.5s" />
 <animate id="circle4" attributeName="cy" attributeType="XML" begin="circle2.end" fill="freeze" from="35" to="85" dur="0.5s" />


 <animate id="circle5" attributeName="cx" attributeType="XML" begin="circle4.end" fill="freeze" from="65" to="115" dur="0.5s" />
 <animate id="circle6" attributeName="cy" attributeType="XML" begin="circle4.end" fill="freeze" from="85" to="85" dur="0.5s" />

 <animate id="circle7" attributeName="cx" attributeType="XML" begin="circle6.end" fill="freeze" from="115" to="115" dur="0.5s" />
 <animate id="circle8" attributeName="cy" attributeType="XML" begin="circle6.end" fill="freeze" from="85" to="135" dur="0.5s" />

 <animate id="circle9" attributeName="cx" attributeType="XML" begin="circle8.end" fill="freeze" from="115" to="165" dur="0.5s" />
 <animate id="circle10" attributeName="cy" attributeType="XML" begin="circle8.end" fill="freeze" from="135" to="135" dur="0.5s" />

 <animate id="circle11" attributeName="cx" attributeType="XML" begin="circle10.end" fill="freeze" from="165" to="165" dur="0.5s" />
 <animate id="circle12" attributeName="cy" attributeType="XML" begin="circle10.end" fill="freeze" from="135" to="185" dur="0.5s" />

 <animate id="circle13" attributeName="cx" attributeType="XML" begin="circle12.end" fill="freeze" from="165" to="215" dur="0.5s" />
 <animate id="circle14" attributeName="cy" attributeType="XML" begin="circle12.end" fill="freeze" from="185" to="185" dur="0.5s" />

 <animate id="circle15" attributeName="cx" attributeType="XML" begin="circle14.end" fill="freeze" from="215" to="215" dur="0.5s" />
 <animate id="circle16" attributeName="cy" attributeType="XML" begin="circle14.end" fill="freeze" from="185" to="235" dur="0.5s" />

 <animate id="circle17" attributeName="cx" attributeType="XML" begin="circle16.end" fill="freeze" from="215" to="265" dur="0.5s" />
 <animate id="circle18" attributeName="cy" attributeType="XML" begin="circle16.end" fill="freeze" from="235" to="235" dur="0.5s" />

<animateColor attributeName="fill" begin="circle19.end"  from="url(#gradientDefinition)" to="white" dur="0.001s" fill="freeze"/>

<animate id="circle19" attributeName="r" begin="circle18.end" from="15" to="60" dur="1s"/>



</circle>
</g>

</svg>
